
var convertDataScatterAll = function(map,data) {
    var res = [];
    for(var j = 0 ;j<map.length;j++){
        for (var i = 0; i < data.length; i++) {
            var geoCoord = map[j][data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                });
            }

        }
    }
    // 有数据的地区的名称和value值
    console.log(map);
    return res;
};
var convertDataScatter = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
            });
        }

    }

    return res;
};
var convertDataLine = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        console.log(data);
        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];

        if (fromCoord && toCoord) {
            res.push({
                fromName: dataItem[0].name,
                toName: dataItem[1].name,
                coords: [fromCoord, toCoord],
                value: dataItem[1].value
            });
        }

    }
    return res;
};


var color = ['#a6c84c', '#ffa022', '#46bee9'];
var i = 0;
var url = "/static/js/supervise/imp/json/map.json";
var refresh = "http://localhost:2018/supervise/imp_person_search";

//控制线的图标样式
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

//控制图标大小
var maxSize4Pin = 48, minSize4Pin = 20;
var max = 480, min = 9; // todo
var myChart = echarts.init(document.getElementById('dituContent'));

//设置监听事件
myChart.on('click', function (params) {
    pop_window({"src":"/supervise/imp_person_detail","type":2,"title":"管理界面","width":1200});
});

//初始化异步请求json数据
$.getJSON(url,function (params) {
    //全局变量
    window.geoCoordMap = params.map;
    window.person = params.person;
    window.data = params.data;
    window.relationship = params.relationship;


    var series = [];
    [[geoCoordMap,person]].forEach(function (item,i) {
        series.push({
            /* name: 'Top 5',*/
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: convertDataScatterAll(item[0],data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 6)),
            symbolSize: function (val) {
                return val[2] / 20;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#FF0000',
                    shadowBlur: 10,
                    shadowColor: '#FF3030'
                }
            },
            zlevel: 1,
            tooltip:{
                trigger: 'item',
                formatter: function (params) {
                    return "<div class='container' style='width:300px;height:200px;'>" +
                        "<div class='top layui-row' style='width:300px;height:100px;'>"+
                        "<div class='image layui-col-sm6' style='height:100px;'>"+
                        "<img src='/static/images/supervise/person.jpeg' width='100px' height='100px'/>" +
                        "</div>"+
                        "<div class='info layui-col-sm6'  style='height:100px;'>"+
                        "<div class='username layui-row'>姓名："+item[1][0].username+"</div>" +
                        "<div class='sex layui-row'>性别："+item[1][0].sex+"</div>" +
                        "<div class='identity layui-row'>身份证号："+item[1][0].identity+"</div>" +
                        "<div class='family layui-row'>家庭住址："+item[1][0].family+"</div>" +
                        "</div>"+
                        "</div>"+
                        "<div class='down layui-row' style='width:300px;height:100px;'>"+
                        "<div class='intro layui-row'>信息简介：</div>" +
                        "<div class='intro layui-row'>"+item[1][0].intro+"</div>" +
                        "</div>"+
                        "</div>"+params.value[2];
                }
            }
        });
    });


    myChart.setOption({
        bmap: {
            center: [105.233777,28.319572],
            zoom: 10,
            roam: true,
            mapStyle: {
                styleJson:[{
                    "featureType": "all",
                    "elementType": "geometry",
                    "stylers": {
                        "hue": "#007fff",
                        "saturation": 89
                    }
                }, {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": {
                        "color": "#ffffff"
                    }
                }]
            }
        },
        tooltip: {
            trigger: 'item',
        },
        series: series


    });

    var bmap = myChart.getModel().getComponent('bmap').getBMap();
    bmap.addControl(new BMap.MapTypeControl());


    var ecModel = myChart._model;
    var map = null;
    ecModel.eachComponent('bmap', function (bmapModel) {
        if(map == null){
            map = bmapModel.__bmap;
        }
    });

    //关闭卫星
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
    //限制地图的级别
    map.setMinZoom(10);
    map.setMaxZoom(18);





//设置放大缩小的动画效果
    setTimeout(function(){
        map.setViewport({center:[105.233777,28.319572]},{enableAnimation:true,delay:2000});

        map.setZoom(15);
    }, 2000);  //2秒后放大到14级
});


//注册监听事件并刷新
$('button').click(function(){
    if($(this).attr("data-type") == "reload"){
        var username = $(".search .layui-form input").val();
        console.log(username);
        $.getJSON(refresh+"?username="+username,function (params) {
            //全局变量
            window.geoCoordMap = params.map;
            window.person = params.person;
            window.data = params.data;
            window.relationship = params.relationship;



            myChart.clear();
            myChart.setOption({
                bmap: {
                    center: [105.233777,28.319572],
                    zoom: 10,
                    roam: true,
                    mapStyle: {
                        styleJson:[{
                            "featureType": "all",
                            "elementType": "geometry",
                            "stylers": {
                                "hue": "#007fff",
                                "saturation": 89
                            }
                        }, {
                            "featureType": "water",
                            "elementType": "all",
                            "stylers": {
                                "color": "#ffffff"
                            }
                        }]
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return "<div class='container' style='width:300px;height:200px;'>" +
                            "<div class='top layui-row' style='width:300px;height:100px;'>"+
                            "<div class='image layui-col-sm6' style='height:100px;'>"+
                            "<img src='http://localhost:2018/static/images/supervise/person.jpeg' width='100px' height='100px'/>" +
                            "</div>"+
                            "<div class='info layui-col-sm6'  style='height:100px;'>"+
                            "<div class='username layui-row'>姓名："+person.username+"</div>" +
                            "<div class='sex layui-row'>性别："+person.sex+"</div>" +
                            "<div class='identity layui-row'>身份证号："+person.identity+"</div>" +
                            "<div class='family layui-row'>家庭住址："+person.family+"</div>" +
                            "</div>"+
                            "</div>"+
                            "<div class='down layui-row' style='width:300px;height:100px;'>"+
                            "<div class='intro layui-row'>信息简介：</div>" +
                            "<div class='intro layui-row'>"+person.intro+"</div>" +
                            "</div>"+
                            "</div>"+params.value[2];
                    }
                },
                series: [
                    {
                        type: 'lines',
                        coordinateSystem: 'bmap',
                        zlevel: 2,
                        symbol: ['none', 'arrow'],
                        symbolSize: 10,
                        /*  effect: {
                              show: true,
                              period: 6,
                              trailLength: 0,
                              symbol: planePath,
                              symbolSize: 15
                          },*/
                        lineStyle: {
                            normal: {
                                color: color[i++%3],
                                width: 1,
                                opacity: 0.6,
                                curveness: 0.2
                            }
                        },
                        data: convertDataLine(relationship)
                    },
                    {
                        /* name: 'Top 5',*/
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: convertDataScatter(data.sort(function (a, b) {
                            return b.value - a.value;
                        }).slice(0, 6)),
                        symbolSize: function (val) {
                            return val[2] / 20;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#FF0000',
                                shadowBlur: 10,
                                shadowColor: '#FF3030'
                            }
                        },
                        zlevel: 1
                    },
                ]


            },true);

            var bmap = myChart.getModel().getComponent('bmap').getBMap();
            bmap.addControl(new BMap.MapTypeControl());


            var ecModel = myChart._model;
            var map = null;
            ecModel.eachComponent('bmap', function (bmapModel) {
                if(map == null){
                    map = bmapModel.__bmap;
                }
            });

            //关闭卫星
            map.addControl(new BMap.MapTypeControl({
                mapTypes:[
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]}));

            //限制地图的级别
            map.setMinZoom(10);
            map.setMaxZoom(18);



            //设置放大缩小的动画效果
            setTimeout(function(){
                map.setViewport({center:[105.233777,28.319572]},{enableAnimation:true,delay:2000});

                map.setZoom(15);
            }, 2000);  //2秒后放大到14级


        });
    }
});


